<template>
  <div class="container content-wraper">
    <div class="user-wrapper">
      <mt-field label="手机号" placeholder="请输入手机号" v-model="mobile" :attr="{ maxlength: 11 }"></mt-field>
      <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password" state="success"></mt-field>
    </div>
    <div class="btn-wrapper">
      <button class="button is-light" @click="forgetPwd">忘记密码</button>
      <button class="button is-primary" @click="btnLogin">Login</button>
  </div>
</div>
</template>
<script>
  import SHA256 from 'crypto-js/sha256';
  import { Field, MessageBox } from 'mint-ui';
  import { Message } from 'element-ui';
  import { mapActions } from 'vuex';
  import CookieTool from '../utils/cookieTool';

  export default {
    data() {
      return {
        mobile: '',
        password: '',
        isActive: false,
      }
    },
    created() {
      this.mobile = CookieTool.get('mobile');
      this.password = CookieTool.get('password');
    },
    methods: {
      btnLogin() {
        let pwd = '';
        if (this.password.length > 50) {
          pwd = this.password;
        } else {
          pwd = SHA256(this.password).toString();
        }
        this.$http.post(this.$url.USERLOGIN, {
          mobile: this.mobile,
          password: pwd,
        }).then((res) => {
          if (res.data.rtnCode === '000') {
            Message({
              message: '登录成功，即将跳转主页',
              type: 'success',
              duration: 2000,
            });
            this.CHANGELOGIN();
            this.GETMOBILE(this.mobile);
            this.ISADMIN();
            setTimeout(() => {
              this.$router.push({ name: 'Home' });
            }, 2000)
          } else {
            Message({
              message: res.data.rtnMsg,
              type: 'error',
              duration: 2000,
            });
          }
        }).catch((err) => {
          Message({
            message: '登录失败，请检查网络',
            type: 'error',
            duration: 2000,
          });
        })
      },
      forgetPwd() {
        MessageBox.prompt('请输入注册手机号').then(({ value, action }) => {
          this.$http.post(this.$url.SENDEMAIL, {
            mobile: value,
          }).then((res) => {
            Message({
              message: res.data.rtnMsg,
              type: 'success',
              duration: 2000,
            });
            setTimeout(() => {
              this.$router.push({ name: 'Home' });
            }, 2000)
          }).catch((err) => {
            Message({
              message: '邮件发送失败，请检查网络',
              type: 'error',
              duration: 2000,
            });
          })
        }).catch((err) => {
          console.log('cancel')
        });
      },
      ...mapActions([
        'CHANGELOGIN',
        'GETMOBILE',
        'ISADMIN',
      ]),
    },
    components: {
      'mt-field': Field,
    },
  };
</script>

<style lang="scss">
@import '../scss/base.scss';
  .content-wraper {
    @include px2rem(margin-top, 20);
    @include px2rem(margin-bottom, 20);
    .btn-wrapper {
      @include px2rem(margin-top, 50);
      @include px2rem(margin-bottom, 50);
      .is-light {
        @include px2rem(margin-right, 30);
      }
    }
  }
  @media screen and (min-width: 769px) {
    .mint-msgbox {
      width: 350px;
    }
  }
</style>
